/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<!--
 * @Author: zhb
 * @Date: 2020-10-15
 * @Description: 普通算子聚合
 -->
<template>
    <div class="agg__form operate_form">
        <sf-form ref="form"
                 class="drawer-form__container"
                 :label-width="80">
            <common-agg-form
                ref="commonAgg"
                :list="fieldList"
                :agg-data="formData"
                :disabled="disabledStatus" />
        </sf-form>
        <div v-if="!disabledStatus && showOperateBtn"
             class="add-operate__btn">
            <sf-button-primary
                class="btn-primary m-r10"
                @click.native="_submit">
                <lang>确定</lang>
            </sf-button-primary>
            <sf-button @click.native="_cancel">
                <lang>取消</lang>
            </sf-button>
        </div>
    </div>
</template>

<script lang=ts>
import { Component, Vue, Ref } from 'vue-property-decorator';

import { deepClone } from 'src/util/deep_clone';
import {
    NORMAL_AGG_DATA
} from 'src/home/mod_cluster/project_manager/feature_manager/const_data';

const DEFAULT_WIDTH = 310;

import commonAggForm from 'src/home/mod_cluster/project_manager/feature_manager/output_form/common_agg_form.vue';
import { SfForm } from '@sxf/sf-vue-component';


@Component({
    name: 'AggForm',
    components:{
        commonAggForm
    }
})
export default class AggForm extends Vue {
    @Ref() form!: SfForm

    formData =  { ...NORMAL_AGG_DATA }

    // TODO: REMOVE ANY
    dateTime: string[] = []
    fieldWidth = DEFAULT_WIDTH
    disabledStatus = false
    showOperateBtn = false
    fieldList = []
    timeFieldList = []

    reset () {
        this.formData  = deepClone(NORMAL_AGG_DATA);
        this.$nextTick(() => {
            // @ts-ignore
            this.$refs.form.clearInvalid();
        });
    }
    clearInvalidMsg () {
        this.$nextTick(() => {
            this.form.clearInvalid();
        });
    }
    getJsonValue () {
        if (!this.isValid()) {
            return this.$warn(this.form.getInvalidMsgs(), { autoHide: true });
        }
        // @ts-ignore
        this.formData.groupByKeys = JSON.stringify(this.formData.groupByKeys);
        // @ts-ignore
        this.formData.aggregationColumns = JSON.stringify(this.formData.aggregationColumns);
        // @ts-ignore
        this.formData.aggregationOps = JSON.stringify(this.formData.aggregationOps);
        return this.formData;
    }
    _submit () {
        if (!this.isValid()) {
            return this.$warn(this.form.getInvalidMsgs(), { autoHide: true });
        }
        // @ts-ignore
        let commonAggData = this.$refs.commonAgg.getJsonValue();
        Object.assign(this.formData, commonAggData);
        // @ts-ignore
        this.formData.groupByKeys = JSON.stringify(this.formData.groupByKeys);
        // @ts-ignore
        this.formData.aggregationColumns = JSON.stringify(this.formData.aggregationColumns);
        // @ts-ignore
        this.formData.aggregationOps = JSON.stringify(this.formData.aggregationOps);
        this.$emit('operate-submit', this.formData);
    }
    _cancel () {
        this.$emit('operate-cancel');
    }
    setFieldList (data) {
        this.fieldList = data;
        this.timeFieldList = data;
    }

    isValid () {
        return this.form.isValid();
    }
};
</script>

<style lang="less">
    .agg__form{
        .sfv-fieldlabel{
            width: 86px !important;
        }

    }
</style>

